<template>
  <div>
    <!-- 首页搜索框 -->
    <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      disabled
      @click="$router.push('/home/searchPopup')"
    />
    <!-- 轮播图  class="my-swipe"    -->
    <van-swipe :autoplay="3000" indicator-color="#1989fa" class="banner-box">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <img :src="item.image_url" width="100%" alt="" />
      </van-swipe-item>
    </van-swipe>

    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// import "@/vantui";

// import request from "@/request/request"
import { getHomeData } from "@/request/api.js";

export default {
  name: "Home",
  components: {},
  data() {
    return {
      value: "",
      bannerList: [],
    };
  },
  created() {
    getHomeData()
      .then((res) => {
        // console.log(success);
        console.log(res);
        this.bannerList = res.data.banner;
        console.log(JSON.stringify(this.bannerList,null,2));
      })
      .catch((err) => {
        console.log("error");
        console.log(err);
      });
  },
};
</script>
<style lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
// 以下代码删除
// .slide-enter,
// .slide-leave-to {
//   /* 过渡开始之前的样式写在这里 */
//   right: -100%;
// }
// .slide-enter-active,
// .slide-leave-active {
//   /* 过渡属性写在这里 */
//   transition: right 0.3s;
// }
// .slide-enter-to,
// .slide-leave {
//   /* 过渡结束之后的样式写在这里 */
//   right: 0;
// }
</style>
